import React, { Component } from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import Progress from  './Progress';

class Account extends Component {
    moneyLog() {
        Alert.alert('余额明细','开发中...');
    }
    integralLog() {
        Alert.alert('积分明细','开发中...');
    }
    privilege() {
        Alert.alert('特权查看','暂无特权');
    }

    render() {
        const rank = {point: Math.floor(Math.random()*800+1),top: 800};
        console.log(rank)
        return (
            <View style={styles.account}>
                <View style={styles.info}>
                    <View>
                        <Text style={styles.title}>账户余额(元)</Text>
                        <Text style={styles.money}>0</Text>
                        <Text style={styles.showMoneyLog} onPress={this.moneyLog}>点击查看余额明细</Text>
                    </View>
                    <View>
                        <Text style={styles.title}>当前积分</Text>
                        <Text style={styles.integral}>0</Text>
                        <Text style={styles.showIntegralLog} onPress={this.integralLog}>点击查看积分明细</Text>
                    </View>
                </View>
                <View style={styles.grow}>
                    <Text style={styles.growGrade}>V1会员</Text>
                    <Text style={styles.growBtn} onPress={this.privilege}>查看权益</Text>
                </View>
                <View style={{marginTop:15}}>
                    <Progress {...rank}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    account: {
        backgroundColor:"white",
        marginTop:20,
        marginBottom:20,
        padding: 20,
        borderRadius: 10
    },
    info: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        paddingBottom: 25,
        paddingTop: 5,
        borderBottomWidth: 1,
        borderBottomColor: "#efefef",
        borderStyle: "solid"
    },
    title: {
        fontSize: 16,
    },
    money: {
        paddingTop: 10,
        paddingBottom: 10,
        fontSize: 30,
        fontWeight: "600",
        color: "#ff861b",
    },
    integral: {
        paddingTop: 10,
        paddingBottom: 10,
        fontSize: 30,
        fontWeight: "600",
        color: "#60cfdf",
    },
    showMoneyLog: {
        color: "#ff861b",
    },
    showIntegralLog: {
        color: "#60cfdf",
    },
    grow: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: 20
    },
    growGrade: {
        fontSize: 20
    },
    growBtn: {
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "#efefef",
        borderRadius: 12,
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 15,
        paddingRight: 15,
        color: "#666",
        fontSize: 15
    },
})

export default Account;